@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100..900&family=Hina+Mincho&display=swap');

:root {
	--color-accent: #FF8800;
	--color-accent-shadow: #BF6600;
	--color-beige: #F2EFEE;
	--color-beige-dark: #816E68;
	--color-link: #00b4cc;
	--color-hover: #00b4cc;
	--color-selection: rgba(28, 199, 221, 0.8);
	--color-base-text: #222;
	--color-black: #222;
	--color-white: #fff;
	--color-white-transparent: rgba(255,255,255,0.4);
	--color-gray-f0: #f0f0f0;
	--color-gray-c: #ccc;
	--color-gray-9: #999;
	--color-gray-6: #666;
	--color-red: #F01F51;
	--color-pink: #ff5a91;
	--color-yellow: #FFFB00;
	--color-blue: #75B4C1;
	--color-green: #E3E39E;
	--color-orange: #FF8800;
	--color-purple: #622C88;
	--color-attention: #F57575;
	--color-attention-yellow: #FFFB00;
	--color-attention-red: #F01F51;
	--color-marker: #FFFB00;
	/* 秋版：早割特典ボックス／チェックボックスの黄緑 */
	--color-lime: #DAE000;
	--color-lime-shadow: #B9BD13;
	--color-lime-text: #3B5121;
	--color-section-title-en: #A1928E;
	--color-sticky-campaign-button: rgba(149, 111, 176, 0.9);
	--color-sticky-cta-button: rgba(255, 136, 0, 0.9);
	--color-course-dormant: #50b593;
	--color-course-dormant-dark: #2c9975;
	--color-course-dormant-light: #86dbbe;
	--color-course-rental: #A1928E;
	--color-course-rental-dark: #816E68;
	--color-course-rental-light: #CDC5C3;
	--color-tab-off: #d3d0cf;
	--color-header-bg: rgba(255,255,255,0.8);
	--color-price-highlight: #ff5a91;
	--color-step-base: #816E68;
	--color-step-arrow: #A1928E;
	--web-font-mincho-family: "Hina Mincho", serif;
	--web-font-mincho-weight: 400;
	--web-font-mincho-style: normal;
	--base-font-family: "Jost", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

* {
	-webkit-text-size-adjust:100%;
}
*, *:before, *:after {
	box-sizing: border-box;
}
.show-sp {
	display: inline-block;
	@media (min-width: 768px) {
		display: none;
	}
}
.show-pc {
	display: none;
	@media (min-width: 768px) {
		display: inline-block;
	}
}

html, body {
	margin: 0;
	padding: 0;
	border: 0;
}
html {
	width: 100%;
	font-size: 62.5%;
	position: relative;
}
body {
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100vh;
	font-family: var(--base-font-family);
	text-align: left;
	font-size: 1.6rem;
	font-feature-settings: "palt";
	letter-spacing: .05em;
	line-height: 2;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	color: var(--color-base-text);
	vertical-align: baseline;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	color: var(--color-white);
	background: var(--color-selection);
}
::-moz-selection {
	color: var(--color-white);
	background: var(--color-selection);
}
a		 { color: var(--color-link); text-decoration: underline; }
a:link	{ color: var(--color-link); }
a:visited { color: var(--color-link); }
a:hover   { color: var(--color-hover); }
a:active  { color: var(--color-link); }
a.disabled {
	pointer-events: none;
}

figure {
	margin: 0;
	padding: 0;
}
img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.main {
	overflow: hidden;
	flex: 1;
	position: relative;
	padding-bottom: 48px;
	@media (min-width: 768px) {
		padding-bottom: 0;
	}
}



/* ==============================
common
============================== */
.contents-width {
	margin-right: auto;
	margin-left: auto;
	width: 92vw;
	max-width: 1024px;
}
.asterisk-list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--base-font-family);
	color: var(--color-gray-6);
	li {
		padding: 0 0 0.4rem 1em;
		position: relative;
		font-size: 1.2rem;
		line-height: 1.6;
		text-indent: -0.55em;
		&::before {
			display: inline-block;
			content: '※';
		}
	}
}
.bg-beige	{ background-color: var(--color-beige); }
.bg-white	{ background-color: var(--color-white); }
.bg-orange   { background-color: var(--color-orange); }
.bg-purple   { background-color: var(--color-purple); }
.bg-blue	 { background-color: var(--color-blue); }
.bg-beige {
	.point-list {
		> li {
			background-color: var(--color-white);
		}
	}
	.faq-list {
		.faq-item {
			background-color: var(--color-white);
		}
	}
}



/* ==============================
section layout
============================== */
.section-concept,
.section-benefits,
.section-pricing,
.section-curriculum,
.section-voices,
.section-teacher,
.section-class-list,
.section-faq {
	padding: 56px 0;
	@media (min-width: 768px) {
		padding: 80px 0;
	}
}
.bg-illust {
	position: relative;
	z-index: 0;
	overflow: hidden;
	padding: 120px 0;
	&::before,
	&::after {
		position: absolute;
		z-index: -1;
		content: '';
		display: block;
		background-size: contain;
		background-repeat: no-repeat;
		width: 80px;
		aspect-ratio: 113 / 499;
	}
	&::before {
		top: 0;
		right: 0;
		transform: rotate(90deg) scale(-1, 1);
		transform-origin: top right;
		background-image: url(../img/bg-illust-blue.webp);
	}
	&::after {
		bottom: 0;
		left: 0;
		transform: rotate(90deg) scale(-1, 1);
		transform-origin: bottom left;
		background-image: url(../img/bg-illust-green.webp);
	}
	@media (min-width: 768px) and (max-width: 959px){
		padding: 80px 0;
		&::before,
		&::after {
			width: 12%;
		}
		&::before {
			transform: rotate(0) scale(1, 1);
		}
		&::after {
			transform: rotate(0) scale(1, 1);
		}
	}
	@media (min-width: 960px) {
		&::before,
		&::after {
			width: 20%;
		}
		&::before {
			transform: rotate(0) scale(1, 1);
		}
		&::after {
			transform: rotate(0) scale(1, 1);
		}
	}
}
/* PC暫定：768〜959px（Figma未対応のタブレット域）はSPレイアウトを読みやすい幅で中央寄せする。
   960px以上は各セクションのブロックで専用レイアウト（Figma PC版 ver2）を実装済み。
   .section-benefits .point-list と .section-curriculum .course-list は、後方の
   各セクション専用ブロック内に同一詳細度で margin:0 の指定があり、ここでの上書きが
   無効化されてしまうため、それぞれの専用ブロック内に個別に中央寄せを定義している */
@media (min-width: 768px) and (max-width: 959px) {
	.section-pricing .campaign-info-box,
	.section-pricing > .contents-width > .asterisk-list,
	.section-concept .concept-text,
	.section-voices .voices-lead,
	.section-teacher .teacher-lead,
	.section-faq .faq-list,
	.cta-wrapper {
		margin-right: auto;
		margin-left: auto;
		max-width: 640px;
	}
}



/* ==============================
sticky cta
============================== */
/* SP（768px未満）は2ボタン縦積み。スクロール位置に応じて JS が下記クラスを付け外しする
   （assets/js/script.js）
     .sp-contents-area  … SPで画面下部の固定バーに変形
     .sp-sticky-active  … 固定バーをスライドイン
     .sticky-footer-area… フッターに被らないよう absolute に戻す
   768px以上はフローティングをやめ、KV内埋め込みの2ボタン横並びにする（詳細は下記の
   @media (min-width: 768px) ブロック参照） */
.sticky-button-wrapper {
	position: absolute;
	/* KVの縦横比 390:816 に対し、Figma上のボタン位置 y=567.5 → 567.5/390 = 145.5vw */
	top: 145.5vw;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 270px;
	pointer-events: none;

	.primary-cta-button,
	.campaign-button {
		position: relative;
		margin: 0;
		pointer-events: all;
		a {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 2px;
			padding: 12px 16px;
			min-height: 97px;
			text-decoration: none;
			text-align: center;
			font-family: var(--web-font-mincho-family);
			font-weight: var(--web-font-mincho-weight);
			font-style: var(--web-font-mincho-style);
			line-height: 1.2;
			border-radius: 8px;
			transition: all 0.2s ease;
		}
		.text-button-minimum {
			display: none;
			letter-spacing: -0.03em;
		}
	}

	/* 上：無料体験レッスン申し込み */
	.primary-cta-button {
		a {
			color: var(--color-white);
			background-color: var(--color-sticky-cta-button);
			box-shadow: 0 4px 0 var(--color-accent-shadow);
			&:hover {
				transform: translateY(-2px);
				box-shadow: 0 6px 0 var(--color-accent-shadow);
			}
		}
		.text-cta-lead {
			position: relative;
			display: inline-block;
			padding: 0 1.4em;
			font-family: var(--base-font-family);
			font-weight: 700;
			font-size: 1.5rem;
			white-space: nowrap;
			&::before,
			&::after {
				position: absolute;
				top: 50%;
				content: '';
				display: block;
				width: 1px;
				height: 1.2em;
				background-color: currentColor;
			}
			&::before {
				left: 0.5em;
				transform: translateY(-50%) rotate(-20deg);
			}
			&::after {
				right: 0.5em;
				transform: translateY(-50%) rotate(20deg);
			}
		}
		.text-cta-main {
			display: block;
			font-family: var(--base-font-family);
			font-weight: 700;
			font-size: 2.6rem;
			letter-spacing: 0.02em;
			.text-cta-main-sub {
				display: block;
				font-size: 2.2rem;
			}
		}
	}

	/* 下：早割特典 → #campaign-info へアンカー */
	.campaign-button {
		a {
			color: var(--color-lime-text);
			background-color: var(--color-lime);
			box-shadow: 0 4px 0 var(--color-lime-shadow);
			&:hover {
				transform: translateY(-2px);
				box-shadow: 0 6px 0 var(--color-lime-shadow);
			}
		}
		.text-campaign-date {
			position: absolute;
			top: -15px;
			left: -26px;
			z-index: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 60px;
			height: 60px;
			font-family: var(--base-font-family);
			font-weight: 700;
			font-size: 1.6rem;
			line-height: 1.1;
			color: var(--color-white);
			border-radius: 50%;
			background-color: #02542D;
			pointer-events: none;
			> span {
				font-size: 0.7em;
			}
		}
		.text-campaign-lead {
			font-family: var(--base-font-family);
			font-weight: 700;
			font-size: 2rem;
		}
		.text-campaign-price {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0.2em;
			line-height: 1.1;
			.price-original {
				font-family: var(--base-font-family);
				font-weight: 700;
				font-size: 2.5rem;
				text-decoration: line-through;
				text-decoration-color: var(--color-attention-red);
				text-decoration-thickness: 2px;
				.text-unit {
					display: inline-block;
					font-size: 0.7em;
					text-decoration: none;
				}
			}
			.price-arrow {
				font-size: 1.2rem;
				color: var(--color-attention-red);
			}
			.price-discounted {
				font-family: var(--base-font-family);
				font-weight: 700;
				font-size: 3.2rem;
				color: var(--color-attention-red);
				.text-unit {
					font-size: 0.55em;
				}
			}
		}
		.text-campaign-more {
			font-family: var(--base-font-family);
			font-weight: 700;
			font-size: 1.5rem;
		}
		.view-switch {
			display: none;
		}
	}

	/* --- SP：画面下部の固定バー --- */
	&.sp-contents-area {
		flex-direction: row;
		gap: 0;
		position: fixed;
		top: auto;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 48px;
		transform: translateY(100%);
		.primary-cta-button,
		.campaign-button {
			width: 50%;
			a {
				padding: 8px;
				min-height: 0;
				height: 100%;
				border-radius: 0;
			}
			.text-button-minimum {
				display: block;
				font-family: var(--base-font-family);
				font-size: 1.3rem;
				line-height: 1.2;
				white-space: nowrap;
			}
		}
		.primary-cta-button {
			.text-cta-lead,
			.text-cta-main {
				display: none;
			}
		}
		.campaign-button {
			.text-campaign-lead,
			.text-campaign-price,
			.text-campaign-more {
				display: none;
			}
			.text-campaign-date {
				top: 50%;
				left: 8px;
				transform: translateY(-50%);
				width: 36px;
				height: 36px;
				font-size: 1.1rem;
				opacity: 0;
			}
		}
		&.sp-sticky-active {
			transform: translateY(0);
			transition: 0.3s;
			.campaign-button {
				.text-campaign-date {
					opacity: 1;
					transition: 0.3s;
				}
			}
		}
	}
	&.sticky-footer-area {
		position: absolute;
	}

	/* .page-title の aspect-ratio が768px以上で 64/31（SP版390/816とは別比率）に変わるため、
	   top の vw値もSP用の145.5vwのままだとKV表示範囲からずれて下に飛び出す。768px以上は
	   960px以上と同じ比率のKVなので同じtop値（43.6vw）に揃える。
	   また768px以上は横幅に余裕があるため、SP版の縦積みではなく2ボタン横並びにする
	   （ボタン幅はSP版と同じ270pxを流用。960px以上はこの下の専用ルールで400pxに拡張） */
	@media (min-width: 768px) {
		top: 43.6vw;
		flex-direction: row;
		gap: 24px;
		width: auto;
		.primary-cta-button,
		.campaign-button {
			width: 270px;
			a {
				border-radius: 8px;
			}
		}
	}
	/* 960px以上はさらにFigma PC版実測のサイズに拡張する。.campaign-button の view-switch
	   （×で引っ込める仕組み）はフローティング前提の機能なので、埋め込み表示では引き続き非表示 */
	@media (min-width: 960px) {
		/* Figma「1920w light」参照：フローティングをやめ、KV内の元の位置に埋め込む（値は仮、実測要調整） */
		position: absolute;
		top: 43.6vw;
		right: auto;
		bottom: auto;
		left: 50%;
		transform: translateX(-50%);
		flex-direction: row;
		gap: 48px;
		width: auto;
		.primary-cta-button,
		.campaign-button {
			width: 400px;
			a {
				border-radius: 8px;
			}
		}
		.primary-cta-button {
			.text-cta-lead {
				font-size: 1.8rem;
			}
			.text-cta-main {
				font-size: 3.4rem;
				.text-cta-main-sub {
					font-size: 2.8rem;
				}
			}
		}
		.campaign-button {
			.text-campaign-date {
				width: 80px;
				height: 80px;
				font-size: 2.1rem;
			}
			.text-campaign-lead {
				font-size: 2.4rem;
			}
			.text-campaign-price {
				.price-original {
					font-size: 3rem;
				}
				.price-discounted {
					font-size: 4rem;
				}
			}
			.text-campaign-more {
				font-size: 1.8rem;
			}
			.view-switch {
				display: none;
			}
			&.button-close {
				transform: none;
			}
		}
	}
}



/* ==============================
label balloon
============================== */
/* 吹き出し形状のラベル共通クラス。text-balloon/cta-discount-label/contact-titleで形状を共有し、
   色（border/background/::afterの三角の色）だけを各クラス側で指定する */
.label-balloon {
	position: absolute;
	top: -1.2rem;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: 0.4rem 2.4rem 0.2rem;
	font-family: var(--base-font-family);
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1.5;
	white-space: nowrap;
	border-radius: 1000px;
	@media (min-width: 960px) {
		font-size: 1.8rem;
	}
	&::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		border-style: solid;
		border-width: 0.6rem 0.4rem 0 0.4rem;
	}
}



/* ==============================
contents cta
============================== */
.section-cta {
	/* 秋版では .bg-illust を外したので、余白はこのブロックで持つ */
	padding: 28px 0 24px;
	text-align: center;
	position: relative;
	/* フッター直前のCTAは concept-copy-wrapper を内包する（Figma上は同一セクション）。
	   上側の余白は concept-copy-wrapper 自身が持つため、ここでは重複させない */
	&.has-concept-copy {
		padding-top: 0;
		/* concept-copy-wrapper と申し込みボタン側の間の余白。旧実装では別セクション同士の
		   余白（このブロックの旧padding-top:28px相当）で確保していたため、統合後も同じ値で維持する */
		> .concept-copy-wrapper {
			margin-bottom: 56px;
			@media (min-width: 960px) {
				/* Figma実測：concept-copy-wrapper下端からcta-wrapperまで61px */
				margin-bottom: 60px;
			}
		}
	}
	/* 配置ごとの余白・背景画像はここで個別調整する（値は別途Figma実測で確定） */
	&.section-cta--pricing {
		padding-bottom: 48px;
		@media (min-width: 960px) {
			padding-bottom: 84px;
		}
	}
	&.section-cta--schools {
		padding: 60px 0;
		@media (min-width: 960px) {
			padding: 148px 0;
		}
	}
	&.section-cta--footer {
		padding: 0 0 48px 0;
		@media (min-width: 960px) {
			> .contents-width,
			> .concept-copy-wrapper {
				position: relative;
				z-index: 1;
			}
			&::after {
				content: '';
				position: absolute;
				z-index: 0;
				pointer-events: none;
				background-repeat: no-repeat;
				background-size: contain;
				top: 0;
				right: 0;
				bottom: 0;
				width: 426px;
				background-image: url(../img/cta--footer-bg-right1.webp), url(../img/cta--footer-bg-right2.webp);
				background-position: right 20px top 60px, right 10px bottom -20px;
				background-size: 362px 402px, 426px 432px;
				background-repeat: no-repeat, no-repeat;
			}
			/* 左側の装飾（cta--footer-bg-left）は1980px幅のFigmaデザイン基準でleft:240pxの固定値。
			   中央寄せされた .contents-width との間に余白が確保できる幅でのみ表示し、
			   ブラウザ幅を縮めたときに本文側へ寄ってこないよう、それ未満では非表示にする */
			@media (min-width: 1980px) {
				&::before {
					content: '';
					position: absolute;
					z-index: 0;
					pointer-events: none;
					background-repeat: no-repeat;
					background-size: contain;
					left: 240px;
					top: 50%;
					transform: translateY(-50%);
					width: 183px;
					height: 190px;
					background-image: url(../img/cta--footer-bg-left.webp);
				}
			}
		}
	}
	/* 教室情報直下のCTA。PCのみFigma実測で左右に銀杏・紅葉の装飾イラストが入る */
	&.has-decoration {
		@media (min-width: 960px) {
			> .contents-width {
				position: relative;
				z-index: 1;
			}
			&::before,
			&::after {
				content: '';
				position: absolute;
				z-index: 0;
				pointer-events: none;
				background-repeat: no-repeat;
				background-size: contain;
			}
			&::before {
				left: -13px;
				top: 38px;
				width: 362px;
				height: 402px;
				background-image: url(../img/cta-schools-bg-left.webp);
			}
			&::after {
				right: -43px;
				top: 290px;
				width: 453px;
				height: 451px;
				background-image: url(../img/concept-bg-pc-right.webp);
			}
		}
	}
	.cta-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 44px;
		.cta-button {
			margin: 0;
			width: 100%;
			max-width: 400px;
			@media (min-width: 960px) {
				max-width: 456px;
			}
			a {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 32px 20px;
				font-weight: 700;
				font-size: 2rem;
				@media (min-width: 960px) {
					font-size: 2.5rem;
				}
				line-height: 1.2;
				text-decoration: none;
				color: var(--color-white);
				white-space: nowrap;
				border-radius: 8px;
				box-shadow: 0 4px 0 var(--color-accent-shadow);
				background: var(--color-accent);
				transition: all 0.2s ease;
				&::before,
				&::after {
					content: '';
					display: block;
					width: 1em;
					height: 1em;
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center center;
				}
				&:hover {
					transform: translateY(-2px);
					box-shadow: 0 6px 0 var(--color-accent-shadow);
				}
				.text-balloon {
					color: var(--color-accent);
					border: 2px solid var(--color-accent);
					background: var(--color-white);
					&::after {
						border-color: var(--color-white) transparent transparent transparent;
					}
				}
			}
		}

		/* 早割特典ブロック（教室情報の下・ページ最下部の2箇所） */
		.cta-discount {
			position: relative;
			width: 100%;
			max-width: 400px;
			@media (min-width: 960px) {
				max-width: 456px;
			}
			.cta-discount-link {
				display: block;
				padding: 2.4rem 1.6rem 1.6rem;
				color: var(--color-lime-text);
				text-decoration: none;
				border-radius: 8px;
				box-shadow: 0 4px 0 var(--color-lime-shadow);
				background-color: var(--color-lime);
				transition: all 0.2s ease;
				&:hover {
					transform: translateY(-2px);
					box-shadow: 0 6px 0 var(--color-lime-shadow);
				}
			}
			.cta-discount-label {
				color: var(--color-lime-shadow);
				border: 2px solid var(--color-lime);
				background: var(--color-white);
				&::after {
					border-color: var(--color-white) transparent transparent transparent;
				}
			}
			.cta-discount-price {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 0.2em;
				margin: 10px 0 0;
				line-height: 1;
				.price-original {
					font-size: 3rem;
					@media (min-width: 960px) {
						font-size: 3.8rem;
					}
					font-weight: 700;
					text-decoration: line-through;
					text-decoration-color: var(--color-attention-red);
					text-decoration-thickness: 2px;
					.text-unit {
						display: inline-block;
						font-size: 2.4rem;
						text-decoration: none;
						@media (min-width: 960px) {
							font-size: 2.8rem;
						}
					}
				}
				.price-arrow {
					font-size: 1.8rem;
					color: var(--color-attention-red);
				}
				.price-discounted {
					font-size: 4.5rem;
					@media (min-width: 960px) {
						font-size: 4.8rem;
					}
					font-weight: 700;
					color: var(--color-attention-red);
					.text-unit {
						font-size: 2.4rem;
						@media (min-width: 960px) {
							font-size: 3.2rem;
						}
					}
				}
			}
			.cta-discount-note {
				margin: 0.4rem 0 0;
				font-size: 1.4rem;
				@media (min-width: 960px) {
					font-size: 1.8rem;
				}
				line-height: 1.5;
				strong {
					font-size: 2rem;
					@media (min-width: 960px) {
						font-size: 2.6rem;
					}
				}
			}
		}

		.contact-by-phone {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 1.6rem;
			padding: 3.2rem 1.6rem 2.4rem;
			width: 100%;
			max-width: 400px;
			@media (min-width: 960px) {
				max-width: 456px;
			}
			border: 1px solid var(--color-gray-c);
			border-radius: 8px;
			background-color: var(--color-white);
			.contact-title {
				color: var(--color-white);
				background: var(--color-gray-6);
				&::after {
					border-color: var(--color-gray-6) transparent transparent transparent;
				}
				.icon-phone {
					transform: translateY(0.15em);
					display: inline-block;
					width: 1em;
					height: 1em;
					background-image: url(../img/icon-phone.svg);
					background-position: center center;
					background-repeat: no-repeat;
					background-size: contain;
				}
			}
			.contact-phone-number {
				margin:  10px 0 0;
				font-size: 2.4rem;
				line-height: 1.2;
				&::before {
					transform: translateY(0.15em);
					content: '';
					display: inline-block;
					margin-right: 0.5em;
					width: 1em;
					height: 1em;
					background-image: url(../img/icon-free-dial.svg);
					background-position: center center;
					background-repeat: no-repeat;
					background-size: contain;
				}
				.contact-phone-number-text {
					font-size: 2.4rem;
					@media (min-width: 960px) {
						font-size: 3rem;
					}
				}
			}
			.text-note {
				margin: 0;
				font-size: 1.4rem;
				@media (min-width: 960px) {
					font-size: 1.8rem;
				}
				line-height: 1.6;
			}
		}
	}
}



/* ==============================
contents bg image
============================== */
.contents-bg-image {
	width: 100%;
	aspect-ratio: 4 / 1;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	&.bg1 {
		background-image: url(../img/contents-bg1.webp);
	}
	&.bg2 {
		background-image: url(../img/contents-bg2.webp);
	}
	&.bg3 {
		background-image: url(../img/contents-bg3.webp);
	}
}



/* ==============================
H2
============================== */
.section-title {
	margin: 0 auto 24px;
	text-align: center;
	font-family: var(--web-font-mincho-family);
	font-weight: var(--web-font-mincho-weight);
	font-style: var(--web-font-mincho-style);
	font-size: 2.6rem;
	line-height: 1.4;
	letter-spacing: 0.1em;
	/* 秋版：見出しの上に載る小さめの導入行（例「まずは気軽に」「私も着られるようになりました！」） */
	.section-title-sub {
		display: block;
		margin-bottom: 0.4em;
		font-size: 2.2rem;
		letter-spacing: 0.05em;
		em {
			font-style: normal;
			color: var(--color-accent);
		}
	}
	.text-en {
		display: block;
		margin-top: 1.6rem;
		font-family: var(--base-font-family);
		font-size: 1.4rem;
		color: var(--color-section-title-en);
	}
	.section-title-number {
		display: inline-block;
		margin: 0.25em -0.35em 0 0;
		transform: translateY(-0.05em);
		width: 1.5em;
	}
	@media (min-width: 768px) {
		margin: 0 auto 36px;
		font-size: 3.2rem;
		.text-en {
			margin-top: 2.4rem;
			font-size: 1.4rem;
		}
	}
}



/* ==============================
Site Header
============================== */
.header {
	position: fixed;
	z-index: 9999;
	transform: translateY(0);
	width: 100%;
	background-color: var(--color-header-bg);
	backdrop-filter: blur(4px);
	transition: 0.3s;
	.header-inner {
		margin-right: auto;
		margin-left: auto;
		padding: 16px 0;
		width: calc(100% - 32px);
		.site-title {
			margin: 0 auto;
			text-align: center;
			font-size: 1rem;
			line-height: 1;
			width: 75%;
			max-width: 400px;
			a {
				display: block;
			}
		}
	}
	@media (min-width: 768px) {
		.header-inner {
			width: calc(100% - 80px);
		}
	}
	&.hide {
		transform: translateY(-100%);
	}
}



/* ==============================
Home header
============================== */
.home-header {
	.section-1st {
		position: relative;
		.page-title {
			margin: 0;
			width: 100%;
			/* SP版KV：390 x 816（Figma 秋ver） */
			aspect-ratio: 390 / 816;
			@media (min-width: 768px) {
				aspect-ratio: 64 / 31;
			}
			/* display は冒頭の .show-sp/.show-pc ルールに任せる。
			   ここで img{display:block} にすると詳細度で上書きし、SP/PC切り替えが効かなくなる */
			.show-sp,
			.show-pc {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
}



/* ==============================
Concept
============================== */
.section-concept {
	position: relative;
	/* 背景の装飾イラスト。SP版は銀杏＋紅葉1点のみ（右下）。PC版は水玉パターン（左）と
	   紅葉・銀杏・実のイラスト（右）の2点で、SPとは別デザイン（Figma実測）。
	   PC版は .section-concept 自体を基準に left:0 / right:0 で配置し、
	   space-between のように左右へ幅いっぱいに振り分ける。
	   ::before/::after はセクション内で最初/最後に描画されるが、position:relative を
	   持つ .contents-width の方が有効z-indexで上に来るため、テキストの裏に自然に回る */
	&::before {
		content: '';
		position: absolute;
		right: 0;
		bottom: 0;
		width: 203px;
		height: 223px;
		background: url(../img/concept-bg-sp.webp) no-repeat center / contain;
		pointer-events: none;
	}
	.contents-width {
		position: relative;
		/* ::after は DOM上で最後に描画されテキストより手前に来てしまうため、
		   z-index を明示してテキストを常に手前に固定する */
		z-index: 1;
	}
	@media (min-width: 960px) {
		padding-top: 120px;
		/* SP用の右下イラストは非表示にし、PC用の左右2点に差し替える */
		&::before {
			bottom: auto;
			/* Figma実測：セクション上端から228px、右端に接する */
			top: 108px;
			width: 415px;
			height: 453px;
			background-image: url(../img/concept-bg-pc-right.webp);
		}
		/* 左側の水玉パターン。Figma実測：セクション上端から236px、左端に接する */
		&::after {
			content: '';
			position: absolute;
			left: 0;
			top: 38px;
			width: 222px;
			height: 389px;
			background: url(../img/concept-bg-pc.webp) no-repeat center / contain;
			pointer-events: none;
		}
	}
	.concept-text {
		font-family: var(--web-font-mincho-family);
		font-weight: var(--web-font-mincho-weight);
		font-style: var(--web-font-mincho-style);
		font-size: 1.6rem;
		line-height: 1.9;
		> p {
			margin: 0 0 2.4rem;
		}
		.concept-check-title {
			margin: 0 0 1.2rem;
			text-align: center;
			font-size: 1.8rem;
			color: var(--color-accent);
		}
		.concept-check-list {
			margin: 0;
			padding: 0;
			list-style: none;
			li {
				position: relative;
				padding: 0 0 0.5em 1.75em;
				line-height: 1.6;
				font-size: 1.6rem;
				@media (min-width: 768px) {
					font-size: 1.8rem;
				}
				&::before {
					position: absolute;
					top: 0.25em;
					left: 0;
					content: '';
					display: block;
					width: 1.2em;
					height: 1.2em;
					background-color: var(--color-lime);
				}
				&::after {
					position: absolute;
					top: 0.4em;
					left: 0.2em;
					transform: rotate(-45deg);
					content: '';
					display: block;
					width: 0.8em;
					height: 0.55em;
					border-style: solid;
					border-width: 0 0 0.225em 0.225em;
					border-color: var(--color-base-text);
				}
			}
		}
	}
	@media (min-width: 768px) {
		.concept-text {
			.concept-check-title {
				font-size: 2rem;
			}
		}
	}
	/* PC版Figma実測：contents-widthは通常どおり1024だが、本文は600px程度に絞って中央寄せ */
	@media (min-width: 960px) {
		.concept-text {
			margin-right: auto;
			margin-left: auto;
			max-width: 600px;
			> p {
				text-align: center;
			}
		}
	}
}

/* きもの00プロジェクトのコピー（秋版ではページ最下部・最終CTAの直前） */
.concept-copy-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 40px 0 0;
	.concept-copy-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 32px;
		margin: 0;
		width: 92vw;
		max-width: 1024px;
		.concept-sub-copy {
			width: 72%;
			max-width: 400px;
		}
		.concept-copy {
			width: 71%;
			max-width: 390px;
		}
	}
	.concept-copy-lead {
		margin: 0;
		padding: 0 16px;
		text-align: center;
		font-family: var(--web-font-mincho-family);
		font-weight: var(--web-font-mincho-weight);
		font-style: var(--web-font-mincho-style);
		font-size: 1.8rem;
		line-height: 2;
		background-color: rgba(255, 255, 255, 0.85);
		.text-accent {
			color: var(--color-accent);
		}
	}
	@media (min-width: 768px) {
		gap: 40px;
		padding-top: 64px;
	}
	/* PC版Figma実測：ロゴコピー（左）とリード文（右）が横並びになる。
	   上余白はセクション上端から50px（旧実装では0にしていたが、CTAとの統合に伴いFigma実測どおり戻す） */
	@media (min-width: 960px) {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 80px;
		padding-top: 50px;
		.concept-copy-inner {
			width: auto;
			max-width: 420px;
			.concept-sub-copy,
			.concept-copy {
				width: 100%;
				max-width: none;
			}
		}
		.concept-copy-lead {
			padding: 0;
			font-size: 2.8rem;
			max-width: 495px;
			text-align: left;
		}
	}
}



/* ==============================
Seven Commitments
============================== */
.section-benefits {
	.point-list {
		display: flex;
		flex-direction: column;
		gap: 108px;
		margin: 0;
		/* ドーム（.img-wrapper）が最初のカード上端からはみ出す分の予約スペース。実測90px */
		padding: 90px 0 0;
		list-style: none;
		/* PC暫定：768〜959px（Figma未対応のタブレット域）はSPレイアウトを読みやすい幅で中央寄せする */
		@media (min-width: 768px) and (max-width: 959px) {
			margin-right: auto;
			margin-left: auto;
			max-width: 640px;
		}
	}
	.point-item {
		position: relative;
		/* カードは point-list 幅いっぱいではなく左右に28pxのマージンが付く（実測302.8px/358.8px） */
		margin: 0 28px;
		padding: 27px 18px 24px;
		border-radius: 16px;
		background-color: var(--color-white);
	}
	/* アイコンを載せる白いドーム（実測180x112の半楕円。下側22pxはカードに重なって継ぎ目が消える） */
	.img-wrapper {
		position: absolute;
		z-index: 0;
		top: -82px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		align-items: flex-end;
		justify-content: center;
		padding-bottom: 16px;
		width: 200px;
		height: 112px;
		border-radius: 90px 90px 0 0 / 100% 100% 0 0;
		background-color: var(--color-white);
		img {
			display: block;
			width: 96px;
			height: auto;
			max-height: 72px;
			object-fit: contain;
		}
	}
	.point-number {
		position: absolute;
		/* .img-wrapper（z-index:1）と18px重なるため、星を必ず手前に出す */
		z-index: 2;
		/* ドーム上端(-90px)よりさらに上、実測で card top から -105px */
		top: -102px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		align-items: flex-end;
		justify-content: center;
		padding-bottom: 7px;
		width: 44px;
		height: 35px;
		background: url(../img/icon-star.svg) no-repeat center center / contain;
		font-family: var(--base-font-family);
		font-size: 1.6rem;
		font-weight: 700;
		line-height: 1;
		color: var(--color-white);
	}
	.point-title {
		margin: 0 0 14px;
		text-align: center;
		font-family: var(--web-font-mincho-family);
		font-weight: var(--web-font-mincho-weight);
		font-style: var(--web-font-mincho-style);
		font-size: 2.2rem;
		line-height: 1.4;
		letter-spacing: 0.08em;
		color: var(--color-accent);
		.point-sub-title {
			display: block;
			margin-top: 6px;
			font-size: 1.6rem;
			letter-spacing: 0.04em;
			color: var(--color-base-text);
			em {
				font-style: normal;
				color: var(--color-accent);
			}
		}
	}
	.point-description {
		margin: 0;
		font-size: 1.4rem;
		line-height: 1.6;
		strong {
			font-weight: 400;
			color: var(--color-accent);
		}
		.text-note-mark {
			margin-left: 0.75em;
			font-size: 0.9em;
			color: var(--color-gray-6);
		}
	}
	.point-image {
		margin-top: 16px;
		img {
			display: block;
			width: 100%;
			border-radius: 4px;
		}
	}
	.point-detail {
		margin-top: 12px;
		font-size: 1.3rem;
		line-height: 1.7;
		.point-goods-list {
			margin: 0 0 6px;
			padding: 0;
			list-style: none;
			color: var(--color-accent);
			li {
				position: relative;
				padding-left: 1em;
				&::before {
					position: absolute;
					left: 0;
					content: '・';
				}
			}
		}
		p {
			margin: 0;
		}
	}
	> .contents-width > .asterisk-list {
		margin-top: 40px;
	}
	@media (min-width: 768px) {
		.point-title {
			font-size: 2.6rem;
			.point-sub-title {
				font-size: 1.8rem;
			}
		}
		.point-description {
			font-size: 1.5rem;
		}
	}
	/* PC版Figma実測：このセクションだけ contents-width が1400pxと広め。
	   カードは1〜3個目/4〜7個目の2行構成。ul>liの構造を保つため、12列グリッドに
	   nth-childで明示配置する（ラッパーdivを使うと ul 直下の要素として無効になるため） */
	@media (min-width: 960px) {
		> .contents-width {
			max-width: 1400px;
		}
		.point-list {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			column-gap: 24px;
			/* ドーム（.img-wrapper）が次の行に90px食い込むため、見た目の余白を64px確保するには
			   90(食い込み分) + 64(実際に見せたい余白) = 154px が必要 */
			row-gap: 154px;
			padding-top: 108px;
		}
		.point-item {
			margin: 0;
		}
		.point-item:nth-child(1) { grid-column: 1 / span 4; grid-row: 1; }
		.point-item:nth-child(2) { grid-column: 5 / span 4; grid-row: 1; }
		.point-item:nth-child(3) { grid-column: 9 / span 4; grid-row: 1; }
		.point-item:nth-child(4) { grid-column: 1 / span 3; grid-row: 2; }
		.point-item:nth-child(5) { grid-column: 4 / span 3; grid-row: 2; }
		.point-item:nth-child(6) { grid-column: 7 / span 3; grid-row: 2; }
		.point-item:nth-child(7) { grid-column: 10 / span 3; grid-row: 2; }
	}
}



/* ==============================
Classroom Info
============================== */
/* padding-topは.section-class-listがまとめて属するグループルール（section layout）の値のまま。
   下側だけこのセクション固有で調整する */
.section-class-list {
	padding-bottom: 16px;
	@media (min-width: 768px) {
		padding-bottom: 48px;
	}
}
/* PC版Figma（ver2）の教室情報は大阪・京都・兵庫の3タブのみで奈良が無いが、
   ユーザー確認により「奈良込みの4タブがSP・PC共通の正」。このブロックは元々
   4タブ想定で書かれているためそのまま流用できる（PC独自スタイルの追加実装は不要）。 */
.tab-area {
	> input[type="radio"] {
		display: none;
	}
	.tab-nav-list {
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		justify-content: space-between;
		.tab-nav-item {
			width: calc(calc(100% - 36px) / 4);
			label {
				cursor: pointer;
				display: inline-block;
				padding: 16px 2px;
				width: 100%;
				font-family: var(--web-font-mincho-family);
				font-weight: var(--web-font-mincho-weight);
				font-style: var(--web-font-mincho-style);
				line-height: 1.6;
				text-align: center;
				color: var(--color-white);
				background-color: var(--color-tab-off);
				border-radius: 8px 8px 0 0;
				.text-searches-number {
					padding-left: 0.25em;
					font-family: var(--base-font-family);
					font-size: 1.2rem;
				}
			}
		}
	}
	#tab-osaka:checked ~ .tab-nav-list label[for="tab-osaka"],
	#tab-kyoto:checked ~ .tab-nav-list label[for="tab-kyoto"],
	#tab-hyogo:checked ~ .tab-nav-list label[for="tab-hyogo"],
	#tab-nara:checked ~ .tab-nav-list label[for="tab-nara"] {
		color: var(--color-base-text);
		background-color: var(--color-white);
	}
	.tab-contents-list {
		margin: 0;
		padding: 0;
		list-style: none;
		.tab-contents-item {
			display: none;
			background-color: var(--color-white);
			border-radius: 0 0 8px 8px;
			.class-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				gap: 16px;
				margin: 0;
				padding: 24px 16px;
				list-style: none;
				> li {
					width: calc(calc(100% - 16px) / 2);
					a {
						display: block;
						padding: 6px 24px;
						text-align: center;
						text-decoration: none;
						color: var(--color-base-text);
						font-size: 1.4rem;
						line-height: 1.6;
						font-weight: 700;
						border-radius: 1000px;
						border: solid 1px var(--color-gray-c);
						background-color: var(--color-white);
					}
				}
			}
		}
	}
	#tab-osaka:checked ~ .tab-contents-list .tab-osaka,
	#tab-kyoto:checked ~ .tab-contents-list .tab-kyoto,
	#tab-hyogo:checked ~ .tab-contents-list .tab-hyogo,
	#tab-nara:checked ~ .tab-contents-list .tab-nara {
		display: block;
	}
	@media (min-width: 768px) and (max-width: 959px){
		.tab-nav-list {
			.tab-nav-item {
				label {
					font-size: 2rem;
					.text-searches-number {
						font-size: 1.4rem;
					}
				}
			}
		}
		.tab-contents-list {
			.tab-contents-item {
				.class-list {
					padding: 24px;
					gap: 16px;
					> li {
						width: calc(calc(100% - 32px) / 3);
						a {
							padding: 8px 24px;
						}
					}
				}
			}
		}
	}
	@media (min-width: 960px) {
		.tab-nav-list {
			.tab-nav-item {
				width: calc(calc(100% - 96px) / 4);
				label {
					padding: 16px;
					font-size: 2.4rem;
					.text-searches-number {
						font-size: 1.4rem;
					}
				}
			}
		}
		.tab-contents-list {
			.tab-contents-item {
				.class-list {
					padding: 40px;
					gap: 24px 32px;
					> li {
						width: calc(calc(100% - 96px) / 4);
						a {
							padding: 8px 24px;
						}
					}
				}
			}
		}
	}
}



/* ==============================
Prices
============================== */
.section-pricing {
	padding-bottom: 20px;
	> .contents-width > .asterisk-list {
		margin-top: 24px;
	}
	/* PCのみFigma実測で左右に装飾背景が入る（section-cta--schools の has-decoration と同じ手法。位置は仮値） */
	@media (min-width: 960px) {
		position: relative;
		z-index: 0;
		> .contents-width {
			position: relative;
			z-index: 1;
		}
		&::before,
		&::after {
			content: '';
			position: absolute;
			z-index: 0;
			pointer-events: none;
			background-repeat: no-repeat;
			background-size: contain;
		}
		&::before {
			left: -50px;
			top: 40px;
			width: 330px;
			height: 321px;
			background-image: url(../img/pricing-bg-left.webp);
		}
		&::after {
			right: 0;
			top: 480px;
			width: 261px;
			height: 346px;
			background-image: url(../img/pricing-bg-right.webp);
		}
	}
}



/* ==============================
#campaign-info
============================== */
/* 早割特典ボックス。sticky button の早割ボタンからのアンカーリンク先でもある */
.campaign-info-box {
	padding: 24px 16px;
	text-align: center;
	border-radius: 16px;
	background-color: var(--color-lime);
	scroll-margin-top: 88px;
	.campaign-title {
		margin: 0;
		font-weight: 700;
		font-size: 2rem;
		line-height: 1.4;
		letter-spacing: 0.08em;
	}
	.campaign-deadline {
		margin: 4px 0 0;
		font-size: 1.6rem;
		font-weight: 700;
		line-height: 1.4;
	}
	.campaign-price {
		margin: 4px 0 8px;
		line-height: 1.1;
		.price-original {
			font-size: 2.5rem;
			font-weight: 700;
			text-decoration: line-through;
			text-decoration-color: var(--color-attention-red);
			text-decoration-thickness: 2px;
			.text-unit {
				display: inline-block;
				text-decoration: none;
			}
		}
		.price-arrow {
			padding-left: 0.1em;
			font-size: 2.2rem;
			font-weight: 700;
		}
		.price-discounted {
			display: block;
			margin-top: 4px;
			font-size: 5.2rem;
			font-weight: 700;
			letter-spacing: 0.02em;
			.text-unit {
				font-size: 0.5em;
			}
		}
		.text-unit {
			font-size: 0.6em;
		}
	}
	.campaign-include-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.campaign-include-item {
		position: relative;
		padding: 12px 16px;
		border-radius: 8px;
		background-color: var(--color-white);
		+ .campaign-include-item::before {
			position: absolute;
			top: -24px;
			left: 50%;
			transform: translateX(-50%);
			content: '＋';
			display: block;
			font-size: 3.8rem;
			font-weight: 700;
			line-height: 1;
		}
	}
	.campaign-include-title {
		margin: 0;
		font-size: 1.7rem;
		font-weight: 700;
		line-height: 1.5;
		strong {
			font-size: 1.3em;
		}
	}
	.campaign-include-note {
		margin: 2px 0 0;
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 1.5;
		color: var(--color-accent);
	}
	.campaign-include-image {
		margin: 10px 0;
		img {
			/* display は .show-sp/.show-pc の切替に任せる（display:blockで上書きすると
			   両方表示されたままになる） */
			width: 100%;
			/* SP実測：243:169.7（元画像とほぼ同じ比率のためクロップはわずか） */
			aspect-ratio: 243 / 170;
			object-fit: cover;
			border-radius: 4px;
		}
	}
	.point-goods-list {
		margin: 0 0 6px;
		padding: 0;
		list-style: none;
		text-align: left;
		font-size: 1.4rem;
		line-height: 1.7;
		color: var(--color-accent);
		li {
			position: relative;
			padding-left: 1em;
			&::before {
				position: absolute;
				left: 0;
				content: '・';
			}
		}
	}
	.campaign-include-description {
		margin: 0;
		text-align: left;
		font-size: 1.4rem;
		line-height: 1.7;
	}
	.campaign-line-note {
		margin: 20px 0 0;
		font-size: 1.4rem;
		font-weight: 700;
		line-height: 1.5;
	}
	@media (min-width: 768px) {
		padding: 32px 24px;
		.campaign-title {
			font-size: 2.5rem;
		}
		.campaign-price {
			.price-discounted {
				font-size: 6.4rem;
			}
		}
	}
	/* PC版Figma実測：3つの内訳カードが横並び。カード幅は均等3分割ではなく158/155/523px、
	   間隔も31px/40pxと不揃い（実測値をそのまま採用）。3つ目（小物セット）だけ、タイトル〜説明文の
	   テキスト列と画像列が左右2列（テキスト列がタテに4段、画像は段をまたいで右に並ぶ） */
	@media (min-width: 960px) {
		padding: 16px 59px;
		.campaign-include-list {
			flex-direction: row;
			align-items: stretch;
			gap: 0 31px;
		}
		.campaign-include-item {
			flex: 0 1 158px;
			&:nth-child(2) {
				flex-basis: 155px;
			}
			/* 1・2個目はタテ中央寄せ（Figma実測：カード高さ200pxの中央にテキストが来る） */
			&:not(:last-child) {
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			+ .campaign-include-item::before {
				top: 50%;
				left: -15.5px;
				transform: translate(-50%, -50%);
			}
			&:last-child {
				flex: 0 1 523px;
				/* 2個目との間隔だけ40px（他は31px）。gapの差分をmargin-leftで補う */
				margin-left: 9px;
				display: grid;
				grid-template-columns: 275px 233px;
				/* grid-template-rowsを指定しないと明示グリッドの行が0本になり、画像側の
				   grid-row:1/-1の「-1」が期待通りに機能しない（テキスト4段分を指せない）ため明示する */
				grid-template-rows: repeat(4, auto);
				align-content: start;
				gap: 0 15px;
				text-align: left;
				.campaign-include-title,
				.campaign-include-note,
				.point-goods-list,
				.campaign-include-description {
					grid-column: 1;
				}
				.campaign-include-image {
					grid-column: 2;
					grid-row: 1 / -1;
					margin: 0;
					img {
						/* PC実測：233:171（SPよりわずかに正方形寄りのクロップ） */
						aspect-ratio: 233 / 171;
					}
				}
				&::before {
					left: -20px;
				}
			}
		}
	}
}



/* ==============================
How to Start
============================== */
.section-curriculum {
	.course-list {
		margin: 0;
		padding: 0;
		list-style: none;
		/* PC暫定：768〜959px（Figma未対応のタブレット域）はSPレイアウトを読みやすい幅で中央寄せする */
		@media (min-width: 768px) and (max-width: 959px) {
			margin-right: auto;
			margin-left: auto;
			max-width: 640px;
		}
	}
	.course-item {
		display: flex;
		flex-direction: column;
	}
	.course-description {
		padding: 20px 16px 24px;
		border-radius: 12px;
		background-color: var(--color-beige);
	}
	.course-section-title {
		margin: 0 0 16px;
		padding: 14px 0;
		text-align: center;
		font-family: var(--web-font-mincho-family);
		font-weight: var(--web-font-mincho-weight);
		font-style: var(--web-font-mincho-style);
		line-height: 1.5;
		letter-spacing: 0.06em;
		border-top: 1px solid var(--color-base-text);
		border-bottom: 1px solid var(--color-base-text);
		em {
			font-style: normal;
			color: var(--color-accent);
		}
		.course-section-title-sub {
			display: block;
			font-size: 2.2rem;
		}
		.course-section-title-main {
			display: block;
			font-size: 2.2rem;
		}
		.course-section-sub-title {
			display: block;
			font-size: 2rem;
		}
	}
	.course-lead {
		margin: 0;
		font-size: 1.4rem;
		line-height: 1.8;
	}
	.course-note-list {
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 1.4rem;
		line-height: 1.8;
		li {
			position: relative;
			padding-left: 1.1em;
			&::before {
				position: absolute;
				left: 0;
				content: '●';
				font-size: 0.8em;
			}
		}
	}
	.course-note-list + .asterisk-list {
		margin-top: 12px;
	}
	/* オレンジの枠付きチェックボックス */
	.course-curriculum-list {
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 1.5rem;
		line-height: 1.6;
		li {
			position: relative;
			padding: 0 0 0.6em 2em;
			&::before {
				position: absolute;
				top: 0.15em;
				left: 0;
				content: '';
				display: block;
				width: 1.2em;
				height: 1.2em;
				border: 1px solid var(--color-accent);
				border-radius: 2px;
				background-color: var(--color-white);
			}
			&::after {
				position: absolute;
				top: 0.35em;
				left: 0.25em;
				transform: rotate(-45deg);
				content: '';
				display: block;
				width: 0.7em;
				height: 0.45em;
				border-style: solid;
				border-width: 0 0 0.2em 0.2em;
				border-color: var(--color-accent);
			}
			.text-note {
				display: block;
				font-size: 1.3rem;
				line-height: 1.6;
				color: var(--color-gray-6);
			}
		}
	}
	.course-curriculum-list + .course-curriculum-note {
		margin-top: 12px;
	}
	.course-curriculum-note {
		margin: 0;
		font-size: 1.5rem;
		line-height: 1.6;
	}
	/* 「きもの活用提案会&参観日」など、上にオレンジの点線で区切るグループ */
	.course-curriculum-list.top-line {
		position: relative;
		margin-top: 16px;
		padding-top: 16px;
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 50%;
			border-top: 2px dotted var(--color-accent);
		}
	}
	.course-lead + .course-image,
	.course-curriculum-list + .course-image {
		margin-top: 14px;
	}
	.course-image {
		display: flex;
		flex-direction: column;
		gap: 8px;
		img {
			display: block;
			width: 100%;
			border-radius: 4px;
		}
	}
	.course-image + .course-curriculum-list,
	.course-image + .course-lead {
		margin-top: 14px;
	}
	/* 次のステップへの導線 */
	.course-allow {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		margin: 0;
		padding: 12px 0;
		line-height: 1.2;
		.course-allow-text {
			font-size: 1.4rem;
			font-weight: 700;
			color: var(--color-accent);
		}
		.course-allow-arrow {
			font-size: 2rem;
			color: var(--color-accent);
		}
	}
	/* 「・・・」（縦3点）でゆるやかにつなぐ導線 */
	.course-allow-dots {
		padding: 24px 0;
		> span {
			position: relative;
			display: block;
			width: 5px;
			height: 5px;
			border-radius: 50%;
			background-color: var(--color-accent);
			&::before,
			&::after {
				position: absolute;
				left: 0;
				content: '';
				display: block;
				width: 5px;
				height: 5px;
				border-radius: 50%;
				background-color: var(--color-accent);
			}
			&::before {
				top: -11px;
			}
			&::after {
				top: 11px;
			}
		}
	}
	@media (min-width: 768px) {
		.course-section-title {
			.course-section-title-sub {
				font-size: 2.4rem;
			}
			.course-section-title-main {
				font-size: 2.4rem;
			}
			.course-section-sub-title {
				font-size: 2.4rem;
			}
		}
		.course-lead,
		.course-note-list {
			font-size: 1.6rem;
		}
		.asterisk-list li {
			font-size: 1.4rem;
		}
		.course-curriculum-list {
			font-size: 1.6rem;
			li .text-note {
				font-size: 1.4rem;
			}
		}
		.course-curriculum-note {
			font-size: 1.6rem;
		}
		.course-allow {
			.course-allow-text {
				font-size: 2.2rem;
			}
		}
	}
	/* PC：12列グリッドで 1〜3個目=3等分横並び／4個目=内容量が多いので1行まるごと／
	   5〜6個目=2等分横並び、という3段構成。行間の矢印・ドットはSP専用の縦導線なので非表示にし、
	   カードの並び自体で流れを示す（ul>li構造のまま nth-child でspan制御。ラッパーdivは使わない） */
	@media (min-width: 960px) {
		padding-bottom: 120px;
		> .contents-width {
			max-width: 1400px;
		}
		.course-list {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			column-gap: 32px;
			row-gap: 48px;
		}
		.course-item {
			position: relative;
			height: 100%;
			grid-column: span 4;
			/* 4番目（「7つ星コース」7回分の詳細）だけ内容量が多いので1行まるごと使う。
			   3→4番目間はgrid標準のrow-gap(48px)のままでよいが、4→5番目間だけ112pxに
			   広げたいため、差分の64pxをここでpadding-bottomとして追加する
			   （48+64=112px。li自体はbackgroundを持たないため4番目カードの見た目の高さには
			   影響せず、透明な余白としてもっと習いたい方は↓との重なりも防げる） */
			&:nth-child(4) {
				grid-column: span 12;
				padding-bottom: 94px;
			}
			/* 5・6番目は最上位3つと同じ幅（span 4）にして、余った列を左右2列ずつで中央配置。
			   間の「・・・」導線のためcolumn-gap(32px)に加えて左右にmarginを足し、
			   見た目の余白を広げる（.course-allow-dotsのleft offsetもこれに合わせて調整済み） */
			&:nth-child(5) {
				grid-column: 3 / span 4;
				margin-right: 24px;
			}
			&:nth-child(6) {
				grid-column: 7 / span 4;
				margin-left: 24px;
			}
		}
		.course-description {
			/* z-index:0を明示してこの要素自体をスタッキングコンテキストにする。こうすると
			   装飾用::before（子孫）はこのカードの中に確実に閉じ込められ、他カードの「→」導線
			   （.course-allow、z-index:1）との数値比較も「カード全体としてz-index:0」対
			   「z-index:1」で常に導線側が勝つ、というシンプルな関係になる
			   （.course-item側で解決しようとすると、.course-itemがグリッドアイテムとして
			   隣のカードと同列で比較され、意図通りに封じ込められなかった） */
			position: relative;
			z-index: 0;
			height: 100%;
		}
		/* PCのみ：1番目・3番目のカードに背景の装飾イラストを追加。.course-item ではなく
		   .course-description 自身の::beforeにすることで、上のz-index:0によるローカルな
		   スタッキングコンテキストに確実に封じ込められ、カード本体の背景より下に固定される */
		.course-item:nth-child(1),
		.course-item:nth-child(3) {
			.course-description::before {
				content: '';
				position: absolute;
				z-index: -1;
				pointer-events: none;
				background-repeat: no-repeat;
				background-size: contain;
			}
		}
		.course-item:nth-child(1) .course-description::before {
			left: 0;
			bottom: 4px;
			width: 218px;
			height: 152px;
			background-image: url(../img/fig-reserve-bg.webp);
		}
		.course-item:nth-child(3) .course-description::before {
			right: -12px;
			bottom: 0;
			width: 234px;
			height: 218px;
			background-image: url(../img/fig-7stars-bg.webp);
		}
		.course-allow {
			display: none;
			font-size: 4em;
			z-index: 1;
			/* SPの基本ルール（.course-allow .course-allow-arrow）と同じ階層に合わせないと
			   詳細度で負けて上書きできない。1emにして親のfont-sizeをそのまま反映させる */
			.course-allow-arrow {
				font-size: 1em;
			}
		}
		/* 1番目・2番目はSPの↓導線の代わりに、カードの右の隙間（gap）に横向き矢印を出す */
		.course-item:nth-child(1) .course-allow,
		.course-item:nth-child(2) .course-allow {
			display: block;
			position: absolute;
			top: 50%;
			left: calc(100% + 16px);
			padding: 0;
			transform: translate(-50%, -50%);
			.course-allow-arrow {
				display: block;
				transform: rotate(-90deg);
			}
		}
		/* 3番目→4番目は行をまたぐので、3番目カード下端の行間（row-gap）中央に下向き矢印を配置 */
		.course-item:nth-child(3) .course-allow {
			display: block;
			position: absolute;
			left: 50%;
			top: 100%;
			padding: 0;
			transform: translate(-50%, -50%);
		}
		/* 「もっと習いたい方は↓」は安心保証（5番目）だけにかかる導線なので、5番目カードの
		   真上・5番目の列幅の中央に配置する（4番目は全幅カードなので4番目基準だと6番目の
		   真上にも見えてしまうため、5番目のカード内から絶対配置で外に出す） */
		.course-item:nth-child(5) > .course-allow:not(.course-allow-dots) {
			display: flex;
			position: absolute;
			left: 50%;
			bottom: 100%;
			/* left:50%だけでwidthを指定しないと、shrink-to-fitの計算がleftから
			   コンテナ右端まで（＝5番目カード幅の半分）を利用可能幅として使うため、
			   狭い5番目カード基準では「もっと習いたい方は」が折り返されてしまう。
			   width:max-contentでコンテンツ幅に固定して回避する */
			width: max-content;
			margin-bottom: 8px;
			padding: 0;
			transform: translateX(-50%);
		}
		/* 「・・・」は安心保証(5番目)ときものでお出かけを(6番目)の間のゆるいつながりを示す導線。
		   HTML上は6番目カードの先頭に配置している（「もっと習いたい方は↓」が5番目カードの
		   先頭にあり、絶対配置でカード上に浮かせているのと同じパターン）。SPと同じ縦3点のまま、
		   6番目カードの真上・幅の中央に配置し、高さは「もっと習いたい方は↓」の導線と揃える */
		.course-item:nth-child(6) .course-allow-dots {
			display: block;
			position: absolute;
			bottom: 108%;
			left: 50%;
			margin-bottom: 8px;
			padding: 0;
			transform: translateX(-50%);
			> span {
				width: 10px;
				height: 10px;
				&::before,
				&::after {
					left: 0;
					width: 10px;
					height: 10px;
				}
				&::before {
					top: -20px;
				}
				&::after {
					top: 20px;
				}
			}
		}
		/* 4番目だけ内容が多いため、写真・チェックリスト・仕切り線付きリストを3カラム横並びにしてコンパクトにする */
		.course-item:nth-child(4) .course-section {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-areas:
				"title title title"
				"lead lead lead"
				"image list1 list2"
				".     note  .";
			column-gap: 32px;
			.course-section-title {
				grid-area: title;
			}
			.course-lead {
				grid-area: lead;
			}
			.course-image {
				grid-area: image;
				img:first-child {
					display: none;
				}
			}
			.course-curriculum-list {
				grid-area: list1;
			}
			.course-curriculum-note {
				grid-area: note;
			}
			.course-curriculum-list.top-line {
				grid-area: list2;
				margin-top: 0;
				padding-top: 0;
				padding-left: 24px;
				&::before {
					top: 0;
					left: 0;
					width: 0;
					height: 100%;
					transform: none;
					border-top: 0;
					border-left: 2px dotted var(--color-accent);
				}
			}
		}
	}
}



/* ==============================
voices
============================== */
.section-voices {
	/* 写真の高さ＝表示幅 × 291/358（Figma のカード比率）。ナビの縦位置計算に使う */
	--voice-image-width: min(92vw, 640px);
	--voice-image-height: calc(var(--voice-image-width) * 291 / 358);
	.voices-lead {
		margin: 0 0 16px;
		font-size: 1.5rem;
		line-height: 1.8;
	}
	.voices-carousel {
		position: relative;
	}
	.voices-list {
		display: flex;
		margin: 0;
		padding: 0;
		list-style: none;
		transition: transform 0.4s ease;
	}
	.voice-item {
		flex: 0 0 100%;
		min-width: 0;
	}
	/* 写真はimgではなくbackground-imageで表示する。object-fit:coverは枠の縦横比に応じた
	   トリミング量しか調整できず「ズーム」ができないため、background-size/positionで
	   SP/PCそれぞれ人物ごとに構図を調整できるようにしている（値はsection-voices.phpの
	   $voices配列で人物ごとに指定、--voice-bg-*としてインラインstyleで渡ってくる） */
	.voice-image {
		margin: 0 auto;
		width: var(--voice-image-width);
		aspect-ratio: 358 / 291;
		border-radius: 4px;
		overflow: hidden;
		background-repeat: no-repeat;
		background-image: var(--voice-bg-image);
		background-position: var(--voice-bg-position, center);
		background-size: var(--voice-bg-size, cover);
	}
	.voice-card-text {
		padding-top: 16px;
	}
	.voice-catch {
		margin: 0;
		font-family: var(--web-font-mincho-family);
		font-weight: var(--web-font-mincho-weight);
		font-style: var(--web-font-mincho-style);
		font-size: 1.9rem;
		line-height: 1.5;
		letter-spacing: 0.08em;
		em {
			font-style: normal;
			color: var(--color-accent);
		}
	}
	.voice-name {
		margin: 4px 0 12px;
		text-align: right;
		font-size: 1.5rem;
		line-height: 1.5;
	}
	.voice-body {
		margin: 0;
		font-size: 1.6rem;
		line-height: 1.8;
	}
	.voices-nav {
		position: absolute;
		top: calc(var(--voice-image-height) / 2);
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		width: 44px;
		height: 44px;
		border: 0;
		border-radius: 50%;
		background-color: var(--color-accent);
		opacity: 0.85;
		cursor: pointer;
		&::before {
			content: '';
			display: block;
			width: 12px;
			height: 12px;
			border-style: solid;
			border-color: var(--color-white);
			border-width: 2px 2px 0 0;
		}
		&:hover {
			opacity: 1;
		}
		&[disabled] {
			opacity: 0.3;
			cursor: default;
		}
	}
	.voices-prev {
		left: 4px;
		&::before {
			transform: translateX(3px) rotate(-135deg);
		}
	}
	.voices-next {
		right: 4px;
		&::before {
			transform: translateX(-3px) rotate(45deg);
		}
	}
	@media (min-width: 768px) {
		.voices-lead {
			margin: 0 0 48px;
		}
		.voices-lead,
		.voice-body {
			font-size: 1.6rem;
		}
		.voice-catch {
			font-size: 2.2rem;
		}
	}
	/* PC版Figma実測：カルーセルではなく3枚を横並び表示（矢印は不要） */
	@media (min-width: 960px) {
		--voice-image-width: 100%;
		/* リード文は他セクション共通の contents-width(1024px) より広い1266px・中央寄せ */
		> .contents-width {
			max-width: 1266px;
		}
		.voices-lead {
			text-align: center;
		}
		/* カルーセル全体は100%ではなく最大幅1540pxで中央寄せ。
		   teacher-list（講師写真）と同じ最大幅に揃える。
		   width:92vw を付けないと、1540px未満の画面幅（例:1366px）でmax-widthが
		   効かず全幅に広がってしまう（.contents-width と同じレスポンシブの効かせ方が必要） */
		.voices-list {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			column-gap: 72px;
			width: 92vw;
			max-width: 1540px;
			margin: 0 auto;
			transform: none !important;
		}
		.voice-item {
			flex: none;
		}
		/* 写真は実測446:460（ほぼ正方形）。SP用の358:291（横長）を上書きする */
		.voice-image {
			aspect-ratio: 446 / 460;
			background-position: var(--voice-bg-position-pc, center);
			background-size: var(--voice-bg-size-pc, cover);
		}
		/* .voice-card-text は .contents-width も併用しているため、そのままだと
		   max-width:1024px/margin:0 auto がグリッドセル幅を無視して展開し、
		   3列のテキストが画面中央で重なってしまう。グリッドセル内では解除する */
		.voice-card-text {
			width: auto;
			max-width: none;
			margin-right: 0;
			margin-left: 0;
		}
		.voices-nav {
			display: none;
		}
	}
}



/* ==============================
Teachers
============================== */
.section-teacher {
	.teacher-lead {
		margin: 0 0 16px;
		font-size: 1.5rem;
		line-height: 1.8;
	}
	.teacher-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px 16px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.teacher-item {
		margin: 0;
	}
	.teacher-image {
		img {
			display: block;
			width: 100%;
			/* Figma実測：SP 174:223・PC 283:363、いずれも約0.78で一致 */
			aspect-ratio: 284 / 363;
			object-fit: cover;
			border-radius: 4px;
		}
	}
	.teacher-name {
		margin: 8px 0 0;
		text-align: center;
		font-size: 1.4rem;
		line-height: 1.5;
	}
	@media (min-width: 768px) {
		.teacher-lead {
			margin: 0 0 48px;
			font-size: 1.6rem;
		}
		.teacher-list {
			grid-template-columns: repeat(4, 1fr);
			margin: 0 auto;
			max-width: 800px;
		}
	}
	/* PC版Figma実測：写真4枚の実測幅は185〜1724px（最大幅1540px、隙間135px）。
	   voices（受講生の声）の写真列とも同じ最大幅で揃える。
	   teacher-list は .contents-width(1024px) の内側にあるため、親を広げないと
	   max-widthを設定してもそちらで頭打ちになる */
	@media (min-width: 960px) {
		> .contents-width {
			max-width: 1540px;
		}
		.teacher-lead {
			max-width: 1024px;
			margin-right: auto;
			margin-left: auto;
			text-align: center;
		}
		.teacher-list {
			gap: 24px 98px;
			max-width: 1540px;
		}
	}
}



/* 教室情報の下：地図から探す（遷移先URLは未定のため href は空） */
.class-list-map-link {
	margin: 24px 0 0;
	@media (min-width: 960px) {
		margin: 48px 0 0;
	}
	text-align: center;
	font-size: 1.6rem;
	@media (min-width: 960px) {
		font-size: 2.2rem;
	}
	font-weight: 700;
	line-height: 1.6;
	a {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: var(--color-base-text);
		text-decoration: none;
		img {
			display: block;
			width: 38px;
			height: 40px;
			@media (min-width: 960px) {
				width: 54px;
				height: 56px;
			}
		}
		.text-note {
			font-size: 1rem;
			@media (min-width: 960px) {
				font-size: 1.4rem;
			}
			color: var(--color-gray-6);
		}
	}
}



/* ==============================
FAQ
============================== */
.faq-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	.faq-item {
		overflow: hidden;
		border-radius: 8px;
		transition: all 0.3s ease;
		.faq-question {
			position: relative;
			display: flex;
			align-items: center;
			gap: 0.8rem;
			padding: 24px 16px 24px 56px;
			cursor: pointer;
			.faq-icon {
				position: absolute;
				top: 0;
				left: 0;
				padding: 0 0.5em 0.8rem 0;
				width: 4.8rem;
				font-size: 2rem;
				line-height: 4rem;
				color: var(--color-white);
				text-align: center;
				letter-spacing: normal;
				background-color: var(--color-beige-dark);
				border-radius: 0 0 100% 0;
				transition: all 0.3s ease;
			}
			.faq-text {
				width: calc(100% - 2.8rem);
				font-family: var(--web-font-mincho-family);
				font-weight: var(--web-font-mincho-weight);
				font-style: var(--web-font-mincho-style);
				line-height: 1.8;
			}
			.faq-toggle-icon {
				position: relative;
				width: 2rem;
				height: 2rem;
				&::before,
				&::after {
					position: absolute;
					top: 50%;
					content: '';
					display: block;
					width: 100%;
					height: 0.2rem;
					background-color: var(--color-beige-dark);
					transition: all 0.3s ease;
				}
				&::after {
					transform: rotate(-90deg);
				}
			}
			.faq-toggle-icon {
				margin-left: auto;
				font-size: 2rem;
				line-height: 1;
			}
			&:hover {
				.faq-toggle-icon {
					&::after {
						transform: rotate(90deg);
					}
				}
			}
		}
		&.is-open {
			color: var(--color-white);
			background-color: var(--color-beige-dark);
			.faq-question {
				.faq-icon {
					color: var(--color-beige-dark);
					background-color: var(--color-white);
				}
				.faq-toggle-icon {
					&::before,
					&::after {
						background-color: var(--color-white);
					}
					&::after {
						transform: rotate(360deg);
					}
				}
				&:hover {
					.faq-toggle-icon {
						&::after {
							transform: rotate(540deg);
						}
					}
				}
			}
		}

		.faq-answer {
			display: none;
			margin: 0 16px 24px 56px;
			padding: 24px;
			line-height: 1.8;
			color: var(--color-base-text);
			border-radius: 8px;
			background-color: var(--color-white);
			.faq-item.is-open & {
				display: block;
			}
		}
	}
	@media (min-width: 768px) {
		.faq-item {
			.faq-question {
				padding: 24px 24px 24px 64px;
				.faq-icon {
					width: 5.6rem;
					font-size: 2.4rem;
					line-height: 4.8rem;
				}
				.faq-text {
					font-size: 2rem;
				}
			}
			.faq-answer {
				margin: 0 24px 24px 64px;
			}
		}
	}
}



/* ==============================
footer
============================== */
.footer {
	font-size: 1.4rem;
	line-height: 1.6;
	color: var(--color-white);
	background-color: var(--color-beige-dark);
	.footer-inner {
		display: flex;
		flex-direction: column;
		gap: 40px;
		margin-right: auto;
		margin-left: auto;
		padding: 56px 0 24px;
		width: calc(100% - 32px);
		.corporate-info-wrapper {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 32px;
			.footer-logo {
				margin: 0;
				width: 200px;
				a {
					display: block;
				}
			}
			.footer-info-description {
				display: flex;
				flex-direction: column;
				gap: 8px;
				.text-company-name {
					margin: 0;
					font-weight: 700;
					text-align: center;
				}
				.corporate-info-table {
					border-collapse: collapse;
					width: 100%;
					font-size: 1.2rem;
					th,
					td {
						padding: 8px 0;
						border-style: solid;
						border-width: 0 0 1px 0;
						border-color: var(--color-white-transparent);
					}
					th {
						padding-right: 1em;
					}
				}
			}
		}
		.footer-nav-wrapper {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			.footer-nav-list {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 1em;
				margin: 0;
				padding: 0;
				list-style: none;
				li {
					a {
						display: block;
						text-decoration: none;
						color: var(--color-white);
					}
				}
			}
			.text-copyright {
				margin: 0;
				font-size: 1rem;
				text-align: center;
			}
		}
	}
	@media (min-width: 768px) {
		.footer-inner {
			flex-direction: row;
			justify-content: space-between;
			padding: 40px 0;
			width: calc(100% - 80px);
			.corporate-info-wrapper {
				flex-direction: row;
				.footer-info-description {
					.text-company-name {
						text-align: left;
					}
				}
			}
			.footer-nav-wrapper {
				justify-content: space-between;
				.footer-nav-list {
					align-items: flex-end;
				}
				.text-copyright {
					font-size: 1.2rem;
				}
			}
		}
	}
}